<template>
  <div class="user-center-bg">
    <div class="user-center-card">
      <h2 class="user-center-title">个人中心</h2>
      
      <el-tabs v-model="activeTab" class="user-tabs">
        <!-- 个人信息 -->
        <el-tab-pane label="个人信息" name="profile">
          <div class="profile-content">
            <div class="profile-header">
              <div class="profile-avatar-container">
                <el-avatar 
                  :size="120" 
                  :src="userInfo.avatar ? userInfo.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" 
                  class="profile-avatar"
                />
                <div class="profile-nickname">
                  <span>{{ userInfo.nickname }}</span>
                  <el-button 
                    type="text" 
                    class="edit-nickname-btn"
                    @click="openNicknameDialog"
                  >
                    <img src="@/assets/Revise.png" alt="修改昵称" class="edit-icon" />
                  </el-button>
                </div>
                <el-button 
                  type="primary" 
                  size="small" 
                  class="change-avatar-btn"
                  @click="openAvatarDialog"
                >
                  更换头像
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 我的商品 -->
        <el-tab-pane label="我的商品" name="products">
          <div class="products-content">
            <el-empty v-if="!userProducts.length && !productsLoading" description="暂无商品"></el-empty>
            <el-row v-else :gutter="24" class="product-list" v-loading="productsLoading">
              <el-col :span="8" v-for="product in userProducts" :key="product.productId">
                <el-card class="product-card" :body-style="{ padding: '0px' }">
                  <img :src="getProductImage(product)" class="product-image">
                  <div class="product-info">
                    <h3>{{ product.title }}</h3>
                    <div style="display:flex;align-items:center;gap:8px;">
                      <span class="price">¥{{ product.price }}</span>
                      <span class="product-status" :class="getStatusClass(product.status)">{{ product.status }}</span>
                    </div>
                    <div class="product-btn-group">
                      <el-button type="primary" size="small" class="detail-btn" @click.stop="goToDetail(product.productId)">查看详情</el-button>
                      <el-button
                        :type="product.status === '下架' ? 'success' : 'warning'"
                        size="small"
                        class="action-btn"
                        @click.stop="handleToggleStatus(product)"
                      >
                        {{ product.status === '下架' ? '重新上架' : '下架' }}
                      </el-button>
                      <el-button
                        type="info"
                        size="small"
                        class="action-btn"
                        @click.stop="openEditProductDialog(product)"
                      >修改</el-button>
                      <el-button
                        type="danger"
                        size="small"
                        class="action-btn"
                        @click.stop="handleDeleteProduct(product)"
                      >删除</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 隐私安全 -->
        <el-tab-pane label="隐私安全" name="security">
          <div class="security-content">
            <el-card class="security-card">
              <template #header>
                <div class="security-header">
                  <span>账号安全</span>
                </div>
              </template>
              <div class="security-item">
                <span>修改密码</span>
                <el-button type="primary" link @click="openPasswordDialog">修改</el-button>
              </div>
              <div class="security-item">
                <span>退出登录</span>
                <el-button type="danger" @click="logout">退出</el-button>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 修改密码对话框 -->
      <el-dialog
        title="修改密码"
        :visible.sync="passwordDialogVisible"
        width="400px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form
          ref="passwordForm"
          :model="passwordForm"
          :rules="passwordRules"
          label-width="100px"
          @submit.native.prevent
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input
              v-model="passwordForm.oldPassword"
              type="password"
              placeholder="请输入旧密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              v-model="passwordForm.newPassword"
              type="password"
              placeholder="请输入新密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="passwordForm.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="passwordDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleUpdatePassword" :loading="updatingPassword">确认修改</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 修改昵称对话框 -->
      <el-dialog
        title="修改昵称"
        :visible.sync="nicknameDialogVisible"
        width="400px"
        :close-on-click-modal="false"
        custom-class="nickname-dialog"
      >
        <el-form
          ref="nicknameForm"
          :model="nicknameForm"
          :rules="nicknameRules"
          label-width="80px"
          @submit.native.prevent
        >
          <el-form-item label="新昵称" prop="nickname">
            <el-input
              v-model="nicknameForm.nickname"
              placeholder="请输入新昵称"
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="nicknameDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleUpdateNickname" :loading="updatingNickname">确认修改</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 选择头像对话框 -->
      <el-dialog
        title="选择头像"
        :visible.sync="avatarDialogVisible"
        width="500px"
        @close="avatarSelecting = false"
      >
        <div class="avatar-select-list">
          <img
            v-for="avatar in avatarList"
            :key="avatar"
            :src="avatar"
            class="avatar-select-item"
            @click="selectAvatar(avatar)"
            :class="{ selected: userInfo.avatar === avatar }"
          />
        </div>
        <template #footer>
          <el-button @click="avatarDialogVisible = false">取消</el-button>
        </template>
      </el-dialog>

      <!-- 商品修改弹窗 -->
      <el-dialog
        title="修改商品信息"
        :visible.sync="editProductDialogVisible"
        width="600px"
        :close-on-click-modal="false"
      >
        <el-form
          ref="editProductForm"
          :model="editProductForm"
          :rules="editProductRules"
          label-width="100px"
        >
          <el-form-item label="商品标题" prop="title">
            <el-input v-model="editProductForm.title" maxlength="100" show-word-limit placeholder="请输入商品标题" />
          </el-form-item>
          <el-form-item label="商品分类" prop="categoryId">
            <el-select v-model="editProductForm.categoryId" placeholder="请选择商品分类">
              <el-option
                v-for="item in categories"
                :key="item.categoryId"
                :label="item.name"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input-number v-model="editProductForm.price" :min="0" :precision="2" :step="0.1" placeholder="请输入商品价格" />
            <span class="price-unit">元</span>
          </el-form-item>
          <el-form-item label="商品描述" prop="description">
            <el-input type="textarea" v-model="editProductForm.description" :rows="4" maxlength="1000" show-word-limit placeholder="请详细描述商品的成色、使用年限等信息" />
          </el-form-item>
          <el-form-item label="商品图片" prop="imageBase64">
            <el-upload
              class="avatar-uploader"
              action="#"
              :http-request="handleEditImageUpload"
              :show-file-list="false"
              :before-upload="beforeImageUpload"
              accept="image/jpeg,image/png,image/jpg"
            >
              <img v-if="editProductImageUrl" :src="editProductImageUrl" class="avatar edit-dialog-img" />
              <el-icon v-else class="avatar-uploader-icon"><el-icon-plus /></el-icon>
            </el-upload>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editProductDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitEditProduct" :loading="editProductSubmitting">保存修改</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ProductService from '@/Services/ProductService'
import { parseJwt } from '@/utils/auth'
import UserService from '@/Services/UserService'
import LogService from '@/Services/LogService'
import CategoryService from '@/Services/CategoryService'

// 使用require.context批量导入Aatar目录下所有jpg头像
const avatarContext = require.context('@/assets/Aatar', false, /\.jpg$/)

export default {
  name: 'UserView',
  data() {
    // 验证确认密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      activeTab: 'profile',
      userInfo: {
        userId: '',
        nickname: '',
        email: '',
        phone: '',
        avatar: ''
      },
      userProducts: [],
      productsLoading: false,
      avatarDialogVisible: false,
      avatarList: avatarContext.keys().map(key => avatarContext(key)),
      avatarSelecting: false,
      passwordDialogVisible: false,
      updatingPassword: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      },
      nicknameDialogVisible: false,
      updatingNickname: false,
      nicknameForm: {
        nickname: ''
      },
      nicknameRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      editProductDialogVisible: false,
      editProductForm: {
        productId: '',
        title: '',
        categoryId: '',
        price: 0,
        description: '',
        imageBase64: ''
      },
      editProductImageUrl: '',
      editProductSubmitting: false,
      editProductRules: {
        title: [
          { required: true, message: '请输入商品标题', trigger: 'blur' },
          { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', min: 0, message: '价格必须大于0', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入商品描述', trigger: 'blur' },
          { min: 10, max: 1000, message: '描述长度在 10 到 1000 个字符', trigger: 'blur' }
        ],
        imageBase64: [
          { required: true, message: '请上传商品图片', trigger: 'change' }
        ]
      },
      categories: []
    }
  },
  created() {
    this.fetchUserInfo()
    this.fetchUserProducts()
    this.fetchCategories()
  },
  methods: {
    getCurrentUserId() {
      const token = localStorage.getItem('token')
      const decoded = parseJwt(token)
      return decoded && (
        decoded.userId ||
        decoded.id ||
        decoded.nameid ||
        decoded.sub ||
        decoded["http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier"]
      )
    },
    async fetchUserInfo() {
      const userId = this.getCurrentUserId()
      if (!userId) return
      try {
        const response = await UserService.GetById(userId)
        if (response && response.data) {
          this.userInfo = {
            userId: response.data.userId,
            nickname: response.data.nickname,
            email: response.data.email || '',
            phone: response.data.phone || '',
            avatar: response.data.avatar || ''
          }
        }
      } catch (error) {
        this.$message.error('获取用户信息失败')
      }
    },
    openAvatarDialog() {
      this.avatarDialogVisible = true
    },
    async selectAvatar(avatarUrl) {
      this.avatarSelecting = true
      try {
        await UserService.UpdateAvatar(this.userInfo.userId, avatarUrl)
        this.$message.success('头像更新成功')
        this.avatarDialogVisible = false
        this.fetchUserInfo()
      } catch (error) {
        this.$message.error('头像更新失败')
      } finally {
        this.avatarSelecting = false
      }
    },
    async fetchUserProducts() {
      const userId = this.getCurrentUserId()
      if (!userId) return
      this.productsLoading = true
      try {
        const response = await ProductService.GetByUserId(userId)
        if (response && response.data) {
          this.userProducts = Array.isArray(response.data) ? response.data : response.data.$values || []
          console.log('filteredProducts:', this.userProducts.filter(p => p.status !== '在售' && p.status !== '已下架'))
        } else {
          this.userProducts = []
        }
      } catch (error) {
        this.userProducts = []
        this.$message.error('获取我的商品失败')
      } finally {
        this.productsLoading = false
      }
    },
    getProductImage(product) {
      if (product.imageBase64) {
        return `data:image/jpeg;base64,${product.imageBase64}`
      }
      return 'https://picsum.photos/300/200?random=' + Math.random()
    },
    getStatusClass(status) {
      switch (status) {
        case '在售':
          return 'status-onsale'
        case '已售出':
          return 'status-sold'
        case '下架':
          return 'status-offline'
        default:
          return ''
      }
    },
    goToDetail(id) {
      this.$router.push({ name: 'ProductDetail', params: { id } })
    },
    logout() {
      localStorage.removeItem('isLogged')
      this.$message.success('已退出登录')
      this.$router.push('/')
      setTimeout(() => { window.location.reload() }, 300)
    },
    updateProfile() {
      this.$message.success('个人信息更新成功')
    },
    async handleToggleStatus(product) {
      const action = product.status === '下架' ? '重新上架' : '下架'
      const newStatus = product.status === '下架' ? '在售' : '下架'
      this.$confirm(`确定要${action}该商品吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await ProductService.UpdateStatus(product.productId, newStatus)
          this.$message.success(`${action}成功！`)
          this.fetchUserProducts()
        } catch (error) {
          this.$message.error(`${action}失败，请稍后重试`)
        }
      }).catch(() => {})
    },
    async handleDeleteProduct(product) {
      this.$confirm('确定要删除该商品吗？删除后不可恢复！', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await ProductService.Delete(product.productId)
          // 日志记录
          try {
            const userId = this.getCurrentUserId()
            // 通过UserService.GetById获取学号
            let studentId = ''
            try {
              const userRes = await UserService.GetById(userId)
              if (userRes && userRes.data) {
                studentId = userRes.data.studentId || userRes.data.name || userRes.data.nickname || ''
              }
            } catch (e) { studentId = '' }
            await LogService.Create({
              id: this.generateGuid(),
              userId: userId,
              detail: `${studentId}删除了商品${product.title}`,
              createTime: new Date().toISOString()
            })
          } catch (logError) {
            console.error('记录删除商品日志失败：', logError)
          }
          this.$message.success('删除成功！')
          this.fetchUserProducts()
        } catch (error) {
          this.$message.error('删除失败，请稍后重试')
        }
      }).catch(() => {})
    },
    // 生成GUID的方法
    generateGuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    openPasswordDialog() {
      this.passwordDialogVisible = true
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
      // 重置表单验证
      this.$nextTick(() => {
        if (this.$refs.passwordForm) {
          this.$refs.passwordForm.resetFields()
        }
      })
    },
    async handleUpdatePassword() {
      if (!this.$refs.passwordForm) return
      
      try {
        await this.$refs.passwordForm.validate()
        this.updatingPassword = true
        
        const userId = this.getCurrentUserId()
        await UserService.UpdatePassword(
          userId,
          this.passwordForm.oldPassword,
          this.passwordForm.newPassword
        )
        
        this.$message.success('密码修改成功，请重新登录')
        this.passwordDialogVisible = false
        // 退出登录
        this.logout()
      } catch (error) {
        if (error.response?.data?.message) {
          this.$message.error(error.response.data.message)
        } else {
          this.$message.error('密码修改失败，请稍后重试')
        }
      } finally {
        this.updatingPassword = false
      }
    },
    openNicknameDialog() {
      this.nicknameDialogVisible = true
      this.nicknameForm.nickname = this.userInfo.nickname
      this.$nextTick(() => {
        if (this.$refs.nicknameForm) {
          this.$refs.nicknameForm.resetFields()
        }
      })
    },
    async handleUpdateNickname() {
      if (!this.$refs.nicknameForm) return
      
      try {
        await this.$refs.nicknameForm.validate()
        this.updatingNickname = true
        
        const userId = this.getCurrentUserId()
        const response = await UserService.UpdateNickname(userId, this.nicknameForm.nickname)
        
        if (response && response.data) {
          this.userInfo.nickname = response.data.nickname
          this.$message.success('昵称修改成功')
          this.nicknameDialogVisible = false
        }
      } catch (error) {
        if (error.response?.data?.message) {
          this.$message.error(error.response.data.message)
        } else {
          this.$message.error('昵称修改失败，请稍后重试')
        }
      } finally {
        this.updatingNickname = false
      }
    },
    async fetchCategories() {
      try {
        const response = await CategoryService.GetAll()
        if (response && response.$values) {
          this.categories = response.$values.filter(cat => cat.isUse === 1)
        } else if (Array.isArray(response)) {
          this.categories = response.filter(cat => cat.isUse === 1)
        }
      } catch (error) {
        this.$message.error('获取分类失败')
      }
    },
    openEditProductDialog(product) {
      this.editProductForm = {
        productId: product.productId,
        title: product.title,
        categoryId: product.categoryId,
        price: product.price,
        description: product.description,
        imageBase64: product.imageBase64 || ''
      }
      this.editProductImageUrl = product.imageBase64 ? `data:image/jpeg;base64,${product.imageBase64}` : ''
      this.editProductDialogVisible = true
    },
    handleEditImageUpload(options) {
      const file = options.file
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        const base64String = e.target.result.split(',')[1]
        this.editProductForm.imageBase64 = base64String
        this.editProductImageUrl = e.target.result
      }
    },
    async submitEditProduct() {
      this.$refs.editProductForm.validate(async (valid) => {
        if (!valid) return
        this.editProductSubmitting = true
        try {
          const { productId, ...updateData } = this.editProductForm
          const res = await ProductService.Update(productId, updateData)
          if (res && res.code === 200) {
            this.$message.success('商品信息修改成功！')
            this.editProductDialogVisible = false
            this.fetchUserProducts()
          } else {
            this.$message.error(res?.message || '商品信息修改失败')
          }
        } catch (error) {
          this.$message.error(error?.response?.data?.message || '商品信息修改失败')
        } finally {
          this.editProductSubmitting = false
        }
      })
    }
  }
}
</script>

<style scoped>
.user-center-bg {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 40px 0;
}

.user-center-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  padding: 40px;
  width: 90%;
  max-width: 1000px;
}

.user-center-title {
  font-size: 28px;
  color: #222;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 32px;
  text-align: center;
}

.user-tabs {
  margin-top: 20px;
}

.profile-content {
  padding: 40px 20px;
}

.profile-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.profile-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}

.profile-avatar {
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.05);
}

.profile-nickname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-top: 8px;
}

.edit-nickname-btn {
  padding: 4px;
  margin-left: 4px;
}

.edit-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.edit-nickname-btn:hover .edit-icon {
  transform: scale(1.1);
}

.change-avatar-btn {
  margin-top: 8px;
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.change-avatar-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nickname-dialog {
  border-radius: 12px;
}

.nickname-dialog :deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.nickname-dialog :deep(.el-dialog__body) {
  padding: 30px 20px;
}

.nickname-dialog :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #eee;
}

.products-content {
  padding: 20px;
}

.product-list {
  margin-top: 20px;
}

.product-card {
  margin-bottom: 32px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: hidden;
  border: none;
}

.product-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
  background-color: #f5f5f5;
  padding: 8px;
  box-sizing: border-box;
}

.product-info {
  padding: 16px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #222;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0 10px 0;
}

.product-status {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 6px;
  margin-left: 8px;
  display: inline-block;
  font-weight: 500;
}

.status-onsale {
  background-color: #67C23A;
  color: white;
}

.status-sold {
  background-color: #F56C6C;
  color: white;
}

.status-offline {
  background-color: #909399;
  color: white;
}

.product-btn-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

.action-btn {
  border-radius: 8px;
  font-weight: 600;
}

.detail-btn {
  width: auto;
  min-width: 80px;
  border-radius: 8px;
  font-weight: 600;
}

.security-content {
  padding: 20px;
}

.security-card {
  max-width: 600px;
  margin: 0 auto;
}

.security-header {
  font-size: 18px;
  font-weight: bold;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.security-item:last-child {
  border-bottom: none;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  padding: 0 20px;
}

:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}

.avatar-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  max-height: 350px;
  overflow-y: auto;
  padding: 10px 0;
}

.avatar-select-item {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eee;
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
}

.avatar-select-item.selected,
.avatar-select-item:hover {
  border: 2px solid #ffd700;
  box-shadow: 0 2px 8px rgba(255,215,0,0.15);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 限制商品修改弹窗内图片大小 */
.edit-dialog-img {
  max-width: 180px;
  max-height: 180px;
  display: block;
  margin: 0 auto;
}
</style> 